---
id: 64a5551d02815a7d323aab8a
title: The Box Model Question C
challengeType: 15
dashedName: the-box-model-question-c
--- 
# --description--

Im Fensterbereich Elemente kannst du die gesamte HTML-Struktur deiner Seite sehen. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.

<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />

When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:

<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />

# --assignment--

Play around with Chrome Dev Tools and see if you can answer the following question.

# --question--

## --text--

Which feature in the Elements pane allows you to select any element on a webpage by hovering over it?

## --answers--

Blue-highlighted icon

---

Styles tab

---

Inspector tab

---

HTML structure view


## --video-solution--

1
